<template>
  <div ref="commonLabelMainDOM" class="commonLabelMain">
    <el-scrollbar max-height="310px">
      <VueDraggable class="labels" @wheel="handleComponentScroll" 
      v-model="labelList" @move="onMoveEvent"
      :animation="250" :filter="'.addLabelBar'">
        <div v-for="(item,index) in labelList" :key="item">
          <Label :labelContent="item" :index="index"/>
        </div>
        <div class="addLabelBar">
          <div class="svg-icon">
            <svg width="50" height="50" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="6" y="6" width="36" height="36" rx="3" fill="none" stroke="#94b1e5" stroke-width="2" stroke-linejoin="round"/>
              <path d="M24 16V32" stroke="#94b1e5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M16 24L32 24" stroke="#94b1e5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="add-text">
            添加导航
          </div>
        </div>
      </VueDraggable>
    </el-scrollbar>
    <!-- 右击 菜单 -->
    <div ref="menuDom" class="menuDom absolute z-[-1]">
        <MenuPart></MenuPart>
    </div>
  </div>
</template>

<script setup>
import Label from './label'
import MenuPart from '@/components/menuPart'
import { VueDraggable } from 'vue-draggable-plus'
import { storeToRefs } from "pinia";
import { useLabelBarStore } from "@/stores/labelBar";
import { onMounted } from 'vue';
const { labelList , commonLabelMainDOM , menuDom  } = storeToRefs(useLabelBarStore());

const handleComponentScroll = (event)=>{
    event.stopPropagation(); // 阻止事件冒泡到主页
}
const onMoveEvent = (event) => {
     //被拖拽的元素
    const draggedElement = event.dragged;
    //目标被替换的元素
    const targetElement = event.related;

    if (targetElement.classList.contains('addLabelBar') || draggedElement.classList.contains('addLabelBar')) {
        // 阻止拖拽
        return false;
    }
}
</script>

<style scoped lang="scss">
.menuDom {
    opacity: 0;
    // transition: all 0.08s linear;
}
.commonLabelMain {
    border-radius: 20px;
    margin: -110px auto 0;
    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.5);
    padding: 20px 15px 20px 20px;
    background-color: var(--ground-glass-boardr-color);
    border-radius: 20px;
    height: 340px;
    width: 1200px;
    backdrop-filter: blur(25px);
    .labels {
          height: 100%;
          display: flex;
          flex-wrap: wrap;
          overflow-y: hidden;
      .addLabelBar {
        cursor: pointer;
        background-color: var(--deskNavigation-items-background-color);
        color: var(--deskNavigation-items-text-color);
        border-color: #00000013;
        width: 9rem;
        height: 8rem;
        border-radius: 1rem;
        border-width: 2px;
        overflow: hidden;
        position: relative;
        border: 2px solid #00000013;
        margin: 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
        .svg-icon {
         margin-top: 12px;
        }
        .add-text {
          font-size: 16px;
          font-weight: 650;
          width: 80px;
          text-align: center;
          letter-spacing: 2px;
        }
      }
    }
    .addLabelBar:hover {
        transition: all 0.2s linear;
        transform: scale(1.08);
    }
}
</style>